import React, {useCallback, memo} from 'react';
import {StyleSheet, FlatList, View, Text} from 'react-native';
import ProductItem from './ProductItem';
import ItemSeparatorComponent from '../base/ItemSeparatorComponent';
// import data from './data.json';

const ProductDetailFlatList = props => {
  const {list, onLoadMore, onScrollCallback} = props;
  const onScroll = useCallback(e => {
    onScrollCallback(e.nativeEvent.contentOffset.y);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const loadMore = useCallback(() => {
    onLoadMore();
  }, [onLoadMore]);
  const renderItem = ({item, index}) => {
    if (index === 0) {
      // return <ProductDetailHeader product={item} />;
      return (
        <View>
          <Text>23</Text>
        </View>
      );
    }
    if (index === 1) {
      return (
        <View>
          <Text>23</Text>
        </View>
      );
    }
    return <ProductItem item={item} />;
  };
  // console.log(list);
  // list.length = 0;
  console.log(88888);
  return (
    <FlatList
      initialNumToRender={8} // 初始渲染个数
      onScroll={onScroll}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      // style={style.FlatList}
      contentContainerStyle={style.FlatList}
      data={list}
      renderItem={renderItem}
      keyExtractor={item => item.product_id}
      numColumns={2}
      /* 分割组件 */
      ItemSeparatorComponent={ItemSeparatorComponent}
      /* 列表为空时 */
      // ListEmptyComponent={ListHeaderComponent}
    />
  );
};

const style = StyleSheet.create({
  FlatList: {
    flexDirection: 'column',
    paddingBottom: 10,
    paddingLeft: '1.2%',
    paddingRight: '1.2%',
    // backgroundColor: '#f40',
  },
});
export default memo(ProductDetailFlatList);
